<!DOCTYPE html>
<html>
  <!-- Html Head Tag-->
  <head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="Rms">
  <!-- Open Graph Data -->
  <meta property="og:title" content="Vue+SpringBoot实现增删改查"/>
  <meta property="og:description" content="" />
  <meta property="og:site_name" content="帅的一逼"/>
  <meta property="og:type" content="article" />
  <meta property="og:image" content="http://shsa.gitee.io"/>
  
    <link rel="alternate" href="/atom.xml" title="帅的一逼" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  

  <!-- Site Title -->
  <title>帅的一逼</title>

  <!-- Bootstrap CSS -->
  
<link rel="stylesheet" href="/myblog/css/bootstrap.min.css">

  <!-- Custom CSS -->
  
  
<link rel="stylesheet" href="/myblog/css/style.light.css">


  <!-- Google Analytics -->
  

<meta name="generator" content="Hexo 4.2.1"></head>

  <body>
    <!-- Page Header -->


<header class="site-header header-background" style="background-image: url(/myblog//img/i.jpg)">
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="page-title with-background-image">
          <p class="title">Vue+SpringBoot实现增删改查</p>
          <p class="subtitle"></p>
        </div>
        <div class="site-menu with-background-image">
          <ul>
            
              <li>
                <a href="/myblog/">
                  
                  Home
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/archives">
                  
                  Archives
                  
                </a>
              </li>
            
              <li>
                <a href="/myblog/about">
                  
                  About
                  
                </a>
              </li>
            
          </ul>
        </div>
      </div>
    </div>
  </div>
</header>

<article>
  <div class="container typo">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <div class="post-info text-muted">
          
            <!-- Author -->
            <span class="author info">By Rms</span>
          
          <!-- Date -->
          <span class="date-time info">On
            <span class="date">2020-07-01</span>
            <span class="time">21:53:53</span>
          </span>
          
        </div>
        <!-- Tags -->
        
        <!-- Post Main Content -->
        <div class="post-content">
          <h1 id="Vue-SpringBoot实现增删改查"><a href="#Vue-SpringBoot实现增删改查" class="headerlink" title="Vue+SpringBoot实现增删改查"></a>Vue+SpringBoot实现增删改查</h1><p>1.首页代码</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 引入Bootstrap  设计首页样式 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">link</span> <span class="attr">href</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"</span> <span class="attr">rel</span>=<span class="string">"stylesheet"</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="comment">&lt;!-- 开发环境版本，包含了有帮助的命令行警告 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- axios --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>



<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">class</span>=<span class="string">"box"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">table</span> <span class="attr">class</span>=<span class="string">"table table-condensed"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">colspan</span>=<span class="string">"4"</span> <span class="attr">class</span>=<span class="string">"h3"</span>&gt;</span><span class="tag">&lt;<span class="name">h3</span> &gt;</span>用户的增删改查<span class="tag">&lt;/<span class="name">h3</span>&gt;</span><span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span>编号<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"success"</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"warning"</span>&gt;</span>密码<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"success"</span>&gt;</span>操作<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">        <span class="comment">&lt;!-- vue中的for循环--&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">tr</span> <span class="attr">v-for</span>=<span class="string">"(user,i) in users"</span> <span class="attr">:key</span>=<span class="string">"i"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"active"</span>&gt;</span>&#123;&#123;user.id&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"success"</span>&gt;</span>&#123;&#123;user.name&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"warning"</span>&gt;</span>&#123;&#123;user.password&#125;&#125;<span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">td</span> <span class="attr">class</span>=<span class="string">"success"</span>&gt;</span></span><br><span class="line">                <span class="comment">&lt;!--javascript:void(0)表示地址禁用--&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:void(0)"</span> @<span class="attr">click</span>=<span class="string">"upd(user.id)"</span>&gt;</span>修改<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:void(0)"</span> @<span class="attr">click</span>=<span class="string">"deleteById(user.id)"</span>&gt;</span>删除<span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">td</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">tr</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">table</span>&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-horizontal"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"id"</span> <span class="attr">class</span>=<span class="string">"col-sm-2 control-label"</span>&gt;</span>编号<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-10"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"number"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"id"</span> <span class="attr">placeholder</span>=<span class="string">"id"</span> <span class="attr">v-model</span>=<span class="string">"user.id"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"name"</span> <span class="attr">class</span>=<span class="string">"col-sm-2 control-label"</span>&gt;</span>姓名<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-10"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"text"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"name"</span> <span class="attr">v-model</span>=<span class="string">"user.name"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">label</span> <span class="attr">for</span>=<span class="string">"password"</span> <span class="attr">class</span>=<span class="string">"col-sm-2 control-label"</span>&gt;</span>密码<span class="tag">&lt;/<span class="name">label</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-10"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">input</span> <span class="attr">type</span>=<span class="string">"password"</span> <span class="attr">class</span>=<span class="string">"form-control"</span> <span class="attr">id</span>=<span class="string">"password"</span> <span class="attr">v-model</span>=<span class="string">"user.password"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"form-group"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col-sm-offset-2 col-sm-10"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">button</span> <span class="attr">type</span>=<span class="string">"submit"</span> <span class="attr">class</span>=<span class="string">"btn btn-default"</span> @<span class="attr">click</span>=<span class="string">"updatea"</span>&gt;</span>编辑<span class="tag">&lt;/<span class="name">button</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></table></figure>



<h5 id="后端使用springboot实现的增删改查方法"><a href="#后端使用springboot实现的增删改查方法" class="headerlink" title="后端使用springboot实现的增删改查方法"></a>后端使用springboot实现的增删改查方法</h5><p>跨域问题使用@CrossOrigin注解加在controller类上</p>
<figure class="highlight java"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">@GetMapping</span>(<span class="string">"/findAll"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> List&lt;user&gt; <span class="title">findAll</span><span class="params">()</span></span>&#123;</span><br><span class="line">    List&lt;user&gt; lists = userService.list();</span><br><span class="line">    <span class="keyword">return</span> lists;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@GetMapping</span>(<span class="string">"/findById"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> user <span class="title">findById</span><span class="params">(Integer id)</span></span>&#123;</span><br><span class="line">    user byId = userService.getById(id);</span><br><span class="line">    <span class="keyword">return</span> byId;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@PutMapping</span>(<span class="string">"/update"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> Boolean <span class="title">update</span><span class="params">(@RequestBody user user1)</span></span>&#123;</span><br><span class="line"> <span class="keyword">return</span> userService.updateById(user1);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@DeleteMapping</span>(<span class="string">"/delectById"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> Boolean <span class="title">deleteById</span><span class="params">(Integer id)</span></span>&#123;</span><br><span class="line">    <span class="keyword">boolean</span> b = userService.removeById(id);</span><br><span class="line">    <span class="keyword">return</span> b;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="meta">@PostMapping</span>(<span class="string">"/insert"</span>)</span><br><span class="line"><span class="function"><span class="keyword">public</span> Boolean <span class="title">insert</span><span class="params">(@RequestBody user user1)</span></span>&#123;</span><br><span class="line">    <span class="keyword">boolean</span> savea = userService.save(user1);</span><br><span class="line">    <span class="keyword">return</span> savea;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>数据库连接语句</p>
<figure class="highlight yml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="attr">datasource:</span></span><br><span class="line">  <span class="attr">driver-class-name:</span> <span class="string">com.mysql.cj.jdbc.Driver</span></span><br><span class="line">  <span class="attr">url:</span> <span class="string">jdbc:mysql://localhost:3306/db2019?useUnicode=true&amp;characterEncoding=UTF-8&amp;serverTimezone=UTC</span></span><br><span class="line">  <span class="attr">username:</span> <span class="string">epetadmin</span></span><br><span class="line">  <span class="attr">password:</span> <span class="number">1234</span></span><br></pre></td></tr></table></figure>

<p>html中调用接口的方法</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">var</span> vm = <span class="keyword">new</span> Vue(&#123;</span></span><br><span class="line"><span class="actionscript">        el: <span class="string">'#app'</span>,</span></span><br><span class="line">        data: &#123;</span><br><span class="line">            users: [],</span><br><span class="line">            user: &#123;&#125;</span><br><span class="line">        &#125;,</span><br><span class="line">        </span><br><span class="line">        methods: &#123;</span><br><span class="line"><span class="actionscript">            <span class="comment">//查询所有</span></span></span><br><span class="line">            findAll() &#123;</span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;</span></span><br><span class="line">                axios(&#123;</span><br><span class="line"><span class="actionscript">                    method: <span class="string">'get'</span>,</span></span><br><span class="line"><span class="actionscript">                    url: <span class="string">'http://localhost:8080/findAll'</span>,</span></span><br><span class="line"><span class="actionscript">                &#125;).then(<span class="function"><span class="keyword">function</span> <span class="params">(response)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    $<span class="keyword">this</span>.users = response.data;</span></span><br><span class="line"><span class="actionscript">                    <span class="comment">//console.log(JSON.stringify($this.users));</span></span></span><br><span class="line">                &#125;)</span><br><span class="line"><span class="actionscript">                    .catch(<span class="function"><span class="keyword">function</span> <span class="params">(error)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(error);</span></span><br><span class="line">                 &#125;);</span><br><span class="line">            &#125;,</span><br><span class="line"><span class="actionscript">            <span class="comment">//修改方法</span></span></span><br><span class="line">            updatea()&#123;</span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;</span></span><br><span class="line"><span class="actionscript">                <span class="keyword">if</span> ($<span class="keyword">this</span>.user.id != <span class="literal">null</span> &amp;&amp; $<span class="keyword">this</span>.user.id!=<span class="string">''</span>) &#123;<span class="comment">//判断是否有id传过来,否则进行新增方法</span></span></span><br><span class="line">                    axios(&#123;</span><br><span class="line"><span class="actionscript">                        method: <span class="string">'put'</span>,</span></span><br><span class="line"><span class="actionscript">                        url: <span class="string">'http://localhost:8080/update'</span>,</span></span><br><span class="line"><span class="javascript">                        data: <span class="built_in">JSON</span>.stringify($<span class="keyword">this</span>.user), <span class="comment">//是将 JavaScript 对象转换为 JSON 字符串</span></span></span><br><span class="line">                        headers: &#123;</span><br><span class="line"><span class="actionscript">                            <span class="string">"Content-Type"</span>: <span class="string">"application/json; charset=UTF-8"</span></span></span><br><span class="line">                        &#125;</span><br><span class="line"><span class="actionscript">                    &#125;).then(<span class="function"><span class="keyword">function</span> <span class="params">(response)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                        alert(<span class="string">"修改成功"</span>);</span></span><br><span class="line"><span class="actionscript">                        $<span class="keyword">this</span>.findAll(); <span class="comment">//修改成功后进行页面刷新</span></span></span><br><span class="line">                    &#125;)</span><br><span class="line"><span class="actionscript">                        .catch(<span class="function"><span class="keyword">function</span> <span class="params">(error)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                            <span class="built_in">console</span>.log(error);</span></span><br><span class="line">                        &#125;);</span><br><span class="line">                    </span><br><span class="line"><span class="actionscript">                &#125;<span class="keyword">else</span> &#123;</span></span><br><span class="line">                    </span><br><span class="line">                    axios(&#123;</span><br><span class="line"><span class="actionscript">                        method: <span class="string">'post'</span>,</span></span><br><span class="line"><span class="actionscript">                        url: <span class="string">'http://localhost:8080/insert'</span>,</span></span><br><span class="line"><span class="javascript">                        data: <span class="built_in">JSON</span>.stringify($<span class="keyword">this</span>.user), </span></span><br><span class="line">                        headers: &#123;</span><br><span class="line"><span class="actionscript">                            <span class="string">"Content-Type"</span>: <span class="string">"application/json; charset=UTF-8"</span></span></span><br><span class="line">                        &#125;</span><br><span class="line"><span class="actionscript">                    &#125;).then(<span class="function"><span class="keyword">function</span> <span class="params">(response)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                        alert(<span class="string">"新增成功"</span>)</span></span><br><span class="line"><span class="actionscript">                        $<span class="keyword">this</span>.findAll();</span></span><br><span class="line">                    &#125;)</span><br><span class="line"><span class="actionscript">                        .catch(<span class="function"><span class="keyword">function</span> <span class="params">(error)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                            <span class="built_in">console</span>.log(error);</span></span><br><span class="line">                        &#125;);</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;,</span><br><span class="line"><span class="actionscript">            <span class="comment">//仅仅是做查询  查询到id进行文本框赋值</span></span></span><br><span class="line">            upd(id)&#123;  </span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;</span></span><br><span class="line">                axios(&#123;</span><br><span class="line"><span class="actionscript">                    method: <span class="string">'get'</span>,</span></span><br><span class="line"><span class="actionscript">                    url: <span class="string">'http://localhost:8080/findById'</span>,</span></span><br><span class="line">                    params:&#123;</span><br><span class="line">                        id:id</span><br><span class="line">                    &#125;</span><br><span class="line"><span class="actionscript">                &#125;).then(<span class="function"><span class="keyword">function</span> <span class="params">(response)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    $<span class="keyword">this</span>.user = response.data;</span></span><br><span class="line">                &#125;)</span><br><span class="line"><span class="actionscript">                    .catch(<span class="function"><span class="keyword">function</span> <span class="params">(error)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(error);</span></span><br><span class="line">                    &#125;);</span><br><span class="line">            &#125;,</span><br><span class="line"><span class="actionscript">            <span class="comment">//根据id进行删除</span></span></span><br><span class="line">            deleteById(id)&#123;</span><br><span class="line"><span class="actionscript">                <span class="keyword">var</span> $<span class="keyword">this</span> = <span class="keyword">this</span>;</span></span><br><span class="line">                axios(&#123;</span><br><span class="line"><span class="actionscript">                    method: <span class="string">'delete'</span>,</span></span><br><span class="line"><span class="actionscript">                    url: <span class="string">'http://localhost:8080/delectById'</span>,</span></span><br><span class="line">                    params:&#123;</span><br><span class="line">                        id:id</span><br><span class="line">                    &#125;</span><br><span class="line"><span class="actionscript">                &#125;).then(<span class="function"><span class="keyword">function</span> <span class="params">(response)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">                    <span class="keyword">if</span>(response.data==<span class="literal">true</span>)&#123;</span></span><br><span class="line"><span class="actionscript">                        alert(<span class="string">"删除成功"</span>);</span></span><br><span class="line"><span class="actionscript">                       $<span class="keyword">this</span>.findAll();</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;)</span><br><span class="line"><span class="actionscript">                    .catch(<span class="function"><span class="keyword">function</span> <span class="params">(error)</span> </span>&#123;</span></span><br><span class="line"><span class="javascript">                        <span class="built_in">console</span>.log(error);</span></span><br><span class="line">                 &#125;);</span><br><span class="line">            &#125;,</span><br><span class="line">        &#125;,</span><br><span class="line"></span><br><span class="line"><span class="actionscript">        created() &#123; <span class="comment">//vue的钩子函数,代表生命周期</span></span></span><br><span class="line"><span class="actionscript">            <span class="keyword">this</span>.findAll();</span></span><br><span class="line">        &#125;,</span><br><span class="line">        &#125;);</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>


        </div>
      </div>
    </div>
  </div>
</article>



    <!-- Footer -->
<footer>
  <div class="container">
    <div class="row">
      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
        <p class="copyright text-muted">
          Theme By <a target="_blank" href="https://github.com/levblanc">Levblanc.</a>
          Inspired By <a target="_blank" href="https://github.com/klugjo/hexo-theme-clean-blog">Clean Blog.</a>
        <p class="copyright text-muted">
          Powered By <a target="_blank" href="https://hexo.io/">Hexo.</a>
        </p>
      </div>
    </div>
  </div>
</footer>


    <!-- After Footer Scripts -->

<script src="/myblog/js/highlight.pack.js"></script>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    var codeBlocks = Array.prototype.slice.call(document.getElementsByTagName('pre'))
    codeBlocks.forEach(function(block, index) {
      hljs.highlightBlock(block);
    });
  });
</script>

  </body>
</html>

